<template>
  <div class="article-detail-main">
    <el-card shadow="hover" class="margin-30">
      <div slot="header">
        <span>新增文章</span>
      </div>
      <!-- 表单存放输入内容 -->
      <el-form ref="articleForm" :model="article" :rules="rules" label-width="150px" size="small">
        <!-- 用el-row布局使表单内容显示在一行 -->
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="作者" prop="author">
              <el-input v-model="article.author" placeholder="作者" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="标题" prop="title">
              <el-input v-model="article.title" placeholder="标题" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="是否显示">
              <!-- isShow(integer, optionl): 是否显示：0 否; 1 是, -->
              <el-switch v-model="article.isShow" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="13" :offset="0">
            <el-form-item label="摘要">
              <el-input v-model="article.summary" type="textarea" rows="3" placeholder="摘要" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 下一行封面图片，使用elementUI的upload图片 -->
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="封面图片">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 文本部分 -->
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="切换富文本类型">
              <el-radio v-model="article.editorType" :label="0">富文本</el-radio>
              <el-radio v-model="article.editorType" :label="1">markdown</el-radio>
              <span style="color:#e6a23c;font-size: 12px;"><i class="el-icon-warning-outline" />注意切换编辑器会清空编辑内容</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0" />
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" :offset="0">
            <!-- 使用富文本标签 -->
            <!-- <Tinymce/> -->
            <textarea id="" name="" cols="30" rows="10" />
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>
<script>
/* import Tinymce from '@/components/Tinymce' */
export default {
  name: 'ArticleDetail',
  /* components:{
    Tinymce,
  }, */
  data() {
    return {
    // 作者和标题必填，需要校验规则
      rules: {
        author: [{ required: true, message: '请输入作者名称', trigger: 'blur' }],
        title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }]
      },
      article: {}
    }
  },
  mounted() {

  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.article-detail-main{
  .margin-30{
    margin: 30px;
  }
}
.el-col-12 {
    width: 70%;
}
</style>
